<template>
  <div class="approve-copy-list">
    <el-card>
      <template #header>
        <div class="card-header">
          <h3>抄送给我的审批</h3>
        </div>
      </template>

      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="待审批" name="1"></el-tab-pane>
        <el-tab-pane label="审批通过" name="2"></el-tab-pane>
        <el-tab-pane label="审批拒绝" name="3"></el-tab-pane>
      </el-tabs>

      <el-table v-loading="loading" :data="approvalList" border style="width: 100%">
        <el-table-column prop="types_name" label="审批类型" width="100" align="center" />
        <el-table-column prop="check_status" label="审核状态" width="110" align="center">
          <template #default="{ row }">
            <span :class="`check-status-color-${row.check_status}`">
              『{{ row.check_status_str }}』
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="admin_name" label="申请人" width="90" align="center" />
        <el-table-column prop="create_time" label="申请时间" width="150" align="center" />
        <el-table-column prop="department" label="所属部门" width="120" align="center" />
        <el-table-column prop="check_users" label="当前审批人" />
        <el-table-column prop="check_copy_users" label="抄送人员" width="150" />
        <el-table-column label="操作" width="80" fixed="right">
          <template #default="{ row }">
            <el-button size="small" type="primary" @click="handleView(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- 抽屉组件 - 用于查看审批详情 -->
    <el-drawer v-model="drawerVisible" title="审批详情" direction="rtl" size="600px">
      <div v-if="currentApproval" class="detail-info">
        <p>
          <strong>ID号:</strong>
          {{ currentApproval.id }}
        </p>
        <p>
          <strong>审批类型:</strong>
          {{ currentApproval.types_name }}
        </p>
        <p>
          <strong>审核状态:</strong>
          <span :class="`check-status-color-${currentApproval.check_status}`">
            {{ currentApproval.check_status_str }}
          </span>
        </p>
        <p>
          <strong>申请人:</strong>
          {{ currentApproval.admin_name }}
        </p>
        <p>
          <strong>申请时间:</strong>
          {{ currentApproval.create_time }}
        </p>
        <p>
          <strong>所属部门:</strong>
          {{ currentApproval.department }}
        </p>
        <p>
          <strong>当前审批人:</strong>
          {{ currentApproval.check_users || '无' }}
        </p>
        <p>
          <strong>抄送人员:</strong>
          {{ currentApproval.check_copy_users || '无' }}
        </p>
        <!-- 可以根据需要添加更多审批详情字段 -->
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import service from '../../utils/request'
  import { useRouter } from 'vue-router'

  // 定义审批项的类型
  interface ApprovalItem {
    id: number | string
    types_name: string
    check_status: number | string
    check_status_str: string
    admin_name: string
    create_time: string
    department: string
    check_users: string
    check_copy_users: string
    [key: string]: any // 允许其他属性
  }

  const router = useRouter()

  // 数据相关
  const approvalList = ref<ApprovalItem[]>([])
  const loading = ref(false)
  const activeTab = ref('0')
  const currentPage = ref(1)
  const pageSize = ref(20)
  const total = ref(0)
  const tableHeight = ref('full-92')

  // 抽屉相关
  const drawerVisible = ref(false)
  const currentApproval = ref<ApprovalItem | null>(null)

  // 获取抄送我的审批列表
  const getCopyApprovalList = async () => {
    try {
      loading.value = true
      const response = await service.get('/home/approve/copylist', {
        params: {
          status: activeTab.value,
          page: currentPage.value,
          limit: pageSize.value,
        },
      })

      if (response.data?.code === 0) {
        approvalList.value = response.data?.data?.list
        total.value = response.data?.data?.total
      } else {
        ElMessage.error(response.data?.msg || '获取审批列表失败')
      }
    } catch (error) {
      ElMessage.error('获取审批列表失败')
    } finally {
      loading.value = false
    }
  }

  // 查看详情
  const handleView = (row: ApprovalItem) => {
    currentApproval.value = row
    drawerVisible.value = true
  }

  // 跳转到详情页面（保留原功能，通过路由跳转）
  const viewDetail = (row: ApprovalItem) => {
    router.push({
      path: '/approval/detail',
      query: {
        id: row.id,
        type: row.types_name,
      },
    })
  }

  // 处理标签页切换
  const handleTabChange = (name: string) => {
    activeTab.value = name
    currentPage.value = 1
    getCopyApprovalList()
  }

  // 处理分页大小变化
  const handleSizeChange = (val: number) => {
    pageSize.value = val
    currentPage.value = 1
    getCopyApprovalList()
  }

  // 处理当前页变化
  const handleCurrentChange = (val: number) => {
    currentPage.value = val
    getCopyApprovalList()
  }

  // 初始化
  onMounted(() => {
    getCopyApprovalList()
  })
</script>

<style scoped>
  .approve-copy-list {
    padding: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .check-status-color-0,
  .check-status-color-4 {
    color: #409eff;
  }

  .check-status-color-1 {
    color: #67c23a;
  }

  .check-status-color-2 {
    color: #f56c6c;
  }

  .check-status-color-3 {
    color: #909399;
  }

  .detail-info {
    padding: 20px;
  }

  .detail-info p {
    margin-bottom: 15px;
    line-height: 1.6;
  }

  .detail-info strong {
    display: inline-block;
    width: 100px;
  }

  :deep(.el-button + .el-button) {
    margin-left: 10px;
  }
</style>
